<template>
  <div>
    <el-table
      ref="table"
      v-loading="table.loading"
      :data="data"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :height="table.height"
      :header-cell-style="{'text-align':'center'}"
    >
      <el-table-column v-if="config.table.showCheckbox" type="selection" fixed="left" />
      <el-table-column v-if="config.table.showExpand" type="expand" fixed="left" />
      <el-table-column type="index" fixed="left" />
      <el-table-column
        v-for="(col,index) in config.table.cols"
        :key="index"
        :column-key="col.name"
        :label="col.label"
        :prop="col.name"
        :min-width="col.width || 180"
        show-overflow-tooltip
        :align="col.align || 'center'"
      >
        <template slot-scope="scope">
          <my-context
            v-if="col.render"
            :render="col.render"
            :row="scope.row"
            :column="col"
          />
          <span v-else>{{ scope.row[col.name] | formatter(col.formatter) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="config.table.operation && data.length > 0"
        label="操作"
        column-key="operation"
        fixed="right"
        :min-width="btnColWidth"
      >
        <template slot-scope="scope">
          <el-button
            v-for="btn in config.table.operation"
            :key="btn.text + '_' + scope.$index"
            :type="btn.type"
            :disabled="btn.disabled"
            :icon="btn.icon"
            @click="btn.click(scope.row)"
          >{{ btn.text }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="config.pager.show"
      ref="pager"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pager.index"
      :page-size="pager.size"
      :total="pager.total"
      @current-change="searchFilter"
      @size-change="pageSizeChange"
    />
  </div>
</template>
<script>
const myContext = {
  functional: true,
  props: {
    render: Function,
    row: Object,
    column: Object
  },
  render: (createElement, data) => {
    const row = data.props.row
    const value = row[data.props.column.name]
    const render = data.props.render
    return render(createElement, row, value)
  }
}

export default {
  name: 'TableRender',
  components: { 'my-context': myContext },
  filters: {
    /**
     * 格式化
     * @param value
     * @param format
     * @returns {*}
     */
    formatter(value, format) {
      if (typeof (format) === 'function') {
        return format(value)
      } else {
        return value
      }
    }
  },
  props: {
    /**
     * 配置项
     */
    config: { type: Object, default: () => { return {} } }
  },
  data() {
    return {
      data: [],
      table: {
        loading: false,
        height: null
      },
      pager: {
        index: 1,
        size: 20,
        total: 0
      }
    }
  },
  computed: {
    /**
     * 操作列宽度
     */
    btnColWidth: {
      get() {
        let width = 0
        const btns = this.config.table.operation
        for (let i = 0; i < btns.length; i++) {
          const btn = btns[i]
          if (btn.type === 'text') {
            width += 45
          } else {
            width += 70
          }
          if (btn.text.length > 2) {
            width += (btn.text.length - 2) * 10
          } // 每多一个字,再加10
          if (btn.icon) {
            width += 20
          } // 有图标加20
        }
        return width || btns.length * 100
      }
    }
  },
  mounted() {
    // 自适应表格高度
    {
      const table = this.$refs.table.$el
      const pager = this.$refs.pager.$el
      window.onresize = () => {
        this.table.height = window.innerHeight - table.offsetTop - 84 - pager.clientHeight - 20
      }
      window.onresize()
    }
  },
  methods: {
    /**
     * 绑定数据
     * @param data 数据源
     */
    bindTable(data) {
      if (data && data.list && data.total) {
        this.data = data.list
        this.pager.total = data.total
      }
      this.table.loading = false
    },
    /**
     * 构造查询条件
     * @param isAll 是否查询全部(不分页)
     */
    buildSearchArgs(isAll = false) {
      let args = `indexpage=${this.pager.index}&sizepage=${this.pager.size}`
      const searchArgs = this.config.table.searchArgs
      for (const key in searchArgs) {
        const value = searchArgs[key]
        const type = typeof value
        if (type !== 'object' && type !== 'function') {
          args += `&${key}=${value}`
        } else if (type === 'object') {
          if (value && value.hasOwnProperty('value')) {
            args += `&${key}=${value.value}`
          }
        }
      }
      return args
    },
    /**
     * 查询/分页事件
     * @param pageIndex 当前页码
     */
    searchFilter(pageIndex = 1) {
      this.table.loading = true
      this.pager.index = pageIndex
      const args = this.buildSearchArgs(false)
      this.config.table.searching(args, false, this.bindTable)
    },
    /**
     * 修改分页大小
     * @param pageSize 分页大小
     */
    pageSizeChange(pageSize = 20) {
      this.pager.size = pageSize
      this.searchFilter(this.pager.index)
    }
  }
}
</script>
